<template>
    <view class="record-i" @click="onGoDetail">
        <view class="i-top">
            <view class="top-title">
                {{ itemInfo?.companyName }}
            </view>
            <view class="top-account">
                <view :class="['account-info', dataIsash === '1' ? '' : 'account-info-active'] ">
                    <view class="account-num">
                        {{ type === 'pay' ? itemInfo.accountBalance : '' }}
                        <text v-if="dataType === 'pay'" class="account-unit">￥</text>
                        {{ type === 'insurance' ? itemInfo?.expireTime : '' }}
                        <text v-if="dataType === 'insurance'" class="account-unit">天</text>
                        <!-- <text class="account-unit"></text> -->
                    </view>
                    <view class="account-balance" v-if="!isExpire && dataType === 'insurance'">  离到期 </view>
                    <view class="account-balance" v-if="!!isExpire && dataType === 'insurance'"> 已过期 </view>
                    <view class="account-balance" v-if="dataType === 'pay'"> 账户余额 </view>
                </view>
                <image
                    v-if="dataIsash === '1'"
                    class="top-account-img"
                    src="../../static/home/orange-subscript.png"
                />
                <image
                    v-if="dataIsash === '0'"
                    class="top-account-img"
                    src="../../static/home/white-subscript.png"
                />
            </view>
        </view>
        <view class="i-info" v-if="itemInfo.insuranceType !== 0">
            <view class="info-row">
                <view class="info-row-left"> 负责人： </view>
                <text class="info-row-right">{{ itemInfo?.conscientiousPeople || itemInfo?.businessPrincipal }}</text>
            </view>
          <view class="info-row" v-if="longInsuranceActive === 0">
            <view class="info-row-left"> 当前在保： </view>
            <text class="info-row-right">{{ itemInfo?.ensureCount }}</text>
          </view>
            <view class="info-row">
                <view class="info-row-left"> 开通时间： </view>
                <text class="info-row-right">{{ itemInfo?.accountExpireTime || itemInfo?.productOpenTime }}</text>
            </view>
        </view>
        <view class="i-info" v-if="Number(itemInfo.insuranceType) === 0">
            <view class="info-row">
                <view class="info-row-left"> 商务负责人： </view>
                <text class="info-row-right">{{ itemInfo?.conscientiousPeople ?? '暂无'}}</text>
            </view>
            <view class="info-row">
                <view class="info-row-left"> 购买期限：</view>
                <text class="info-row-right">{{ itemInfo?.rechargeAmount ?? 0 }}个月</text>
            </view>
            <view class="info-row">
                <view class="info-row-left"> 到期时间：</view>
                <text class="info-row-right">{{ itemInfo?.accountExpireTime }}</text>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { GetPayCompleteDto } from '@/api/reminder'
import { share } from '@/utils/share'
const props = defineProps(['type', 'isash', 'item', 'isexpire', 'longInsuranceActive'])
const emits = defineEmits(['detail'])
const dataIsash = ref()
const dataType = ref()
const itemInfo = ref({} as GetPayCompleteDto)
const isExpire = ref()
// watch(() => props.item, () => {
//     itemInfo.value = props.item
//     dataIsash.value = props.isash
//     dataType.value = props.type
//     isExpire.value = props.isexpire
// })
const onGoDetail = () => {
    console.log('点击啦')
    console.log(itemInfo.value, 'itemInfo')
    emits('detail', { id: itemInfo.value.companyId, dealId: itemInfo.value.dealId })
}
onMounted(async () => {
    itemInfo.value = props.item
    dataIsash.value = props.isash
    dataType.value = props.type
    isExpire.value = props.isexpire
    share()
})
</script>

<style lang="scss" scoped>
.record-i {
    padding: 30rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
}
.i-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1rpx solid #f4f4f7;
    padding-bottom: 60rpx;
}
.top-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 42rpx;
    width: 750rpx;
    font-size: $font-medium;
    font-weight: bold;
    color: $black;
}
.top-type {
    padding: 6rpx 15rpx;
    font-size: 24rpx;
    background-color: #00d679;
    border-radius: 30rpx;
    flex: none;
    color: #ffffff;
    margin-right: 16rpx;
}
.top-account {
    position: relative;
    width: 200rpx;
    color: #ff7642;
}
.account-num {
    font-size: $font-large;
    font-weight: bold;
    display: flex;
    align-items: baseline;
    text-align: right;
    justify-content: flex-end;
}
.account-unit {
    font-size: $font-small;
}
.account-unit-top {
    margin-top: 20rpx;
    font-size: $font-base;
}
.account-balance {
    text-align: right;
    color: $font-small;
}
.account-info {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
.account-info-active {
    color: #9497b1 !important;
}
.top-account-img {
    position: absolute;
    width: 72rpx;
    height: 72rpx;
    top: 0;
    right: 0;
    z-index: 0;
}
.i-info {
    margin-top: 30rpx;
}
.info-row {
    display: flex;
}
.info-row-left {
    width: 170rpx;
    color: $grey;
    font-size: $font-normal;
    margin-bottom: 17rpx;
}
.info-row-right {
    color: $black;
    font-size: $font-normal;
    margin-bottom: 17rpx;
}
</style>
